<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Temu卖家助手</title>
  <style>
    .app {
      background-color: #282c34;
    }

    .app-header {
      background-color: #282c34;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .app-body,
    .app-link {
      padding: 10px;
    }

    .app-link a {
      color: #1890ff;
    }

    .btn {
      width: 100%;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      display: inline-block;
      margin: 0.6rem auto 0.2rem auto;
      font-size: 14px;
      background: #fb7701;
      color: #fff;
      border: 1px solid #adadad;
      border-radius: 2px;
      cursor: pointer;
      border-color: transparent;
      text-align: center;
      text-decoration-line: none;
      box-sizing: border-box;
      transition: background-color 0.3s ease; /* 添加过渡效果 */
    }

    .btn:hover {
      background-color: #e66400; /* 鼠标悬停时的背景色 */
    }

    .btn:active {
      background-color: #d44600; /* 按钮被点击时的背景色 */
    }

    .radio-container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .radio-container input[type="checkbox"] {
      -webkit-appearance: none; /* 隐藏原生的单选框样式 */
      -moz-appearance: none;
      appearance: none;
      width: 16px; /* 设置自定义单选框的尺寸 */
      height: 16px;
      border: 1px solid #adadad; /* 单选框边框样式 */
      border-radius: 3px; /* 圆角边框 */
      margin-right: 10px; /* 单选框与文字间距 */
      cursor: pointer;
      outline: none; /* 去除聚焦时的边框 */
    }

    .radio-container input[type="checkbox"]:checked {
      background-color: #fb7701; /* 选中时的背景色 */
    }

    .radio-container label {
      color: #282c34; /* 文字颜色 */
      cursor: pointer;
    }

  </style>
</head>

<body style="width: 200px">

  <div className="app">
    <div className="app-header">
      <h4 style="color: red;">人生如逆旅，我亦是行人。</h4>
    </div>

    <div className="app-link">

      <form>
        <fieldset>
          <legend>功能设置</legend>
      
          <div class="radio-container">
            <input type="checkbox" id="closeForm" name="closeForm" value="1">
            <label for="closeForm">关闭表单提示</label>
          </div>
          
          <div class="radio-container">
            <input type="checkbox" id="Cancelcountdown" name="Cancelcountdown" value="1">
            <label for="Cancelcountdown">取消消息倒计时</label>
          </div>
          
          <div class="radio-container">
            <input type="checkbox" id="Answerassistant" name="Answerassistant" value="1">
            <label for="Answerassistant">开启答题助手</label>
          </div>

          <div class="radio-container">
            <input type="checkbox" id="Show" name="Show" value="1">
            <label for="Show">开启装逼模式</label>
          </div>
        </fieldset>
      </form>
      
      <!-- <button class="btn" id="testBTN">开始加入发货台</button> -->
      <a class="btn" href="https://gitee.com/wx_b77c9939b4/temu-tool" target="_blank" rel="noreferrer">
          支持作者更新
      </a>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
